import React, {useEffect} from 'react';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import moment from 'moment';
import '../index.less';
import {Calendar,Badge } from 'antd';

const CalendarList = () => {

  const attendanceDate = [
    {
      date:'2020-12-5',
      state:0,//正常 green
    },
    {
      date:'2020-12-6',
      state:1,//迟到 yellow
    },
  ];

  // useEffect(() => {
  //   //获取日历数据
  // }, []);

  const onPanelChange = (value, mode) => {
    console.log(value.format('YYYY-MM-DD'), mode);
  };

  const getListData = (value) => {
    let listData = [];
    attendanceDate?.map(item => {
      let date = item.date.split("-");
      //循环日期，拿value日期跟data里的数据日期做匹配
      if (value.date().toString() === date[2]) {
        switch (item.state) {
          case 0:
            listData = [
              {color: 'green', content: '正常'}
            ];
            break;
          case 1:
            listData = [
              {color: 'yellow', content: '迟到'}
            ];
            break;
          default:
        }
      }
    });
    return listData;
  };

  const dateCellRender = (value) => {
    const listData = getListData(value);;
    return (
      <ul className="events">
        {listData.map(item => (
          <li key={item.content}>
            <Badge status={item.color} text={item.content} />
          </li>
        ))}
      </ul>
    );
  };

  return (
    <PageHeaderWrapper>
      <Calendar dateCellRender={dateCellRender} onPanelChange={onPanelChange} className='calendar-hide-year-month'/>
    </PageHeaderWrapper>
  )
};
export default (CalendarList);
